'use client';

import { Footer } from '@/app/[lang]/components/Footer/client';
import { UseTranslation } from '@/app/i18n/client';
import Link from 'next/link';
import { useState } from 'react';

const Page: React.FC<{ params: { lang: Lang } }> = ({ params: { lang } }) => {
  const { t } = UseTranslation(lang, 'client-page');
  const [counter, setCounter] = useState(0);
  return (
    <>
      <h1>{t('title')}</h1>
      <p>{t('counter', { count: counter })}</p>
      <div>
        <button onClick={() => setCounter(Math.max(0, counter - 1))}>-</button>
        <button onClick={() => setCounter(Math.min(10, counter + 1))}>+</button>
      </div>
      <Link href={`/${lang}`}>
        <button type="button">{t('back-to-home')}</button>
      </Link>
      <Footer lang={lang} />
    </>
  );
};

export default Page;
